<link rel="stylesheet" type="text/css" href="/component/element/multifile/public/static/webuploader-0.1.5/webuploader.css">
<script src="/component/element/multifile/public/static/webuploader-0.1.5/webuploader.min.js"></script>





<style>
    .webuploader-pick {
        background-color: var(--primary-color);
        /* 你想要的颜色 */
        color: #fff;
        /* 文字颜色 */
        border-color: var(--primary-color);
        /* 按钮边框颜色 */
    }

    .sortable-chosen {
        background-color: #577CB4;
    }
</style>
<a id="picker_<?php echo $name ?>">选择文件</a>

<table class="layui-table" id="table_<?php echo $name ?>">
    <thead>
        <tr>
            <th scope="col">文件</th>
            <th scope="col">文件大小</th>
            <th scope="col">上传进度</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        if (isset($value)) {
            if (is_array($value) ||  $value = is_json($value)) {

        ?>
                <tr>
                    <td>
                        <input class="layui-input" type=" text" name="<?php echo $name ?>[orgname]" value="<?php echo $value['orgname'] ?>" />
                    </td>
                    <td><?php echo $value['size'] ?></td>
                    <td><i class="iconfont" style="color:green">&#xe63c; </i></td>

                    <td>
                        <a class="iconfont delfile<?php echo $name; ?>" style="padding-right:8px">&#xe607;</a>
                    </td>
                    <input type="hidden" id="" value="<?php echo $value['size'] ?>" name="<?php echo $name ?>[size]" />
                    <input type="hidden" id="" value="<?php echo $value['path'] ?>" name="<?php echo $name ?>[path]" />
                </tr>
        <?php
            }
        }
        ?>
    </tbody>
</table>

<script>
    var uploader_<?php echo $name; ?>;
    layui.use(function() {
        var form = layui.form;


       


        uploader_<?php echo $name; ?> = WebUploader.create({
            auto: true,
            multiple: false,
            fileNumLimit: 1, //上传数量限制
            // swf文件路径
            swf: '/component/element/singlefile/public/static/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/element/singlefile/Index/upload?token=<?php echo element_safe_token('singlefile') ?>',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker_<?php echo $name ?>',
            chunked: true,
            formData: {
                "submittype": 'webupload'
            },
            compress: false,
            fileVal: '<?php echo $name ?>_file', // 自定义文件字段名
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        //会员等级
        var UserGrade = '<?php echo json_encode($usergrades, JSON_UNESCAPED_UNICODE) ?>'
        var UserGradeObj = eval("(" + UserGrade + ")");
        var gradeselect = '';



        uploader_<?php echo $name; ?>.onFileQueued = function(file) {
            filename = file.name;
            file.orgname = filename;
            var index1 = filename.lastIndexOf(".");
            var index2 = filename.length;
            var ext = filename.substring(index1, index2); //后缀名
            file.name = WebUploader.guid() + ext;

            $('#table_<?php echo $name ?>').find('tbody').html('\
            <tr>\
                <td>\
                   <input class="layui-input" type=" text" name="<?php echo $name ?>[orgname]" value="' + file.orgname + '"/>\
                </td>\
                <td id="size_' + file.id + '"></td> \
                <td id="Progress_' + file.id + '">0% \
                </td>\
                <td> <a class="iconfont delfile<?php echo $name; ?>" fileid="' + file.id + '" style="padding-right:8px">&#xe607;</a>\
                </td> \
                <input type="hidden" id="size_' + file.id + '_hide" value="" name="<?php echo $name ?>[size]" />\
                <input type="hidden" id="path_' + file.id + '_hide" value="" name="<?php echo $name ?>[path]" />\
            </tr> \
            ');

            form.render();
        };
        // 文件上传过程中创建进度条实时显示。
        uploader_<?php echo $name; ?>.on('uploadProgress', function(file, percentage) {
            $('#Progress_' + file.id).html((percentage * 100).toFixed(2) + "%");
            // 具体逻辑...
        });
        uploader_<?php echo $name; ?>.on('uploadSuccess', function(file, response) {

            if (typeof(response.error) != 'undefined') {
                $('#size_' + file.id).parent().remove();
                if (typeof toastr_error === 'function') {
                    toastr_error(response.error.message);
                } else {
                    alert(response.error.message);
                }

            } else {
                $('#size_' + file.id).html(response.size);
                $('#size_' + file.id + '_hide').val(response.size);
                $('#path_' + file.id + '_hide').val(response.path);
                $('#Progress_' + file.id).html('<i class="iconfont" style="color:green">&#xe63c; </i>');
            }
        });


        $('body').on('click', '.delfile<?php echo $name; ?>', function() {
            var fileId = $(this).attr('fileid');
            var file = uploader_<?php echo $name; ?>.getFile(fileId); // 获取文件对象
            if (file) {
                uploader_<?php echo $name; ?>.removeFile(file);
            }


            $(this).parent().parent().remove();
        });

    });
</script>